<script setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Edit, Delete, Lock } from '@element-plus/icons-vue'
import ChangeProgram from './components/ChangeProgram.vue'
import ShowContent from './components/ShowContent.vue'
import ProjectApi from '@/service/api/project/project'
import { format, parseISO } from 'date-fns'
const changeProgram = ref()

// 添加项目
const handleAdd = () => {
  changeProgram.value.open({})
}
// 编辑项目
const handleEdit = (row) => {
  changeProgram.value.open(row)
}
//获取项目列表
// 函数：将 ISO 日期时间字符串格式化为 `yyyy-MM-dd HH:mm:ss.SSS` 格式
const formatDate = (isoDateString) => {
  // 解析 ISO 8601 格式的日期时间字符串
  const date = parseISO(isoDateString)
  // 使用 date-fns 格式化日期
  return format(date, 'yyyy-MM-dd HH:mm:ss')
}
const tableData = ref([
  {
    project_id: '',
    id: 1,
    title: '',
    info: '',
    people_num: '',
    categorization: '',
    start_time: '',
    over_time: '',
    status: ''
  }
])
// 获取项目列表函数
const getProjectList = async () => {
  const res = await ProjectApi.getProjectList()
  // 转化日期格式
  tableData.value = res.data
  // 格式化日期时间
  tableData.value.forEach((item) => {
    item.start_time = formatDate(item.start_time)
    item.over_time = formatDate(item.over_time)
  })
}
getProjectList()

// 删除项目
// const handleDelete = () => {
//   ElMessageBox.confirm('确认删除该项目？', '提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning'
//   })
//     .then(() => {
//       ElMessage({
//         type: 'success',
//         message: '删除成功'
//       })
//     })
//     .catch(() => {
//       ElMessage({
//         type: 'info',
//         message: '已取消删除'
//       })
//     })
// }
// 终止项目报名
const formModel = ref({
  title: '',
  info: '',
  people_num: '',
  start_time: '',
  over_time: '',
  categorization: '',
  project_id: ''
})
const handleEnd = async (row) => {
  try {
    await ElMessageBox.confirm('确认终止该项目报名？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    formModel.value = row
    console.log(formModel.value)
    // 获取当前时间并转化为 yyyy-MM-dd HH:mm:ss 格式
    const now = new Date()
    const over_time = format(now, 'yyyy-MM-dd HH:mm:ss')
    formModel.value.over_time = over_time
    formModel.value.status = 1
    console.log(formModel.value)
    await ProjectApi.editProject(formModel.value)
    ElMessage({
      type: 'success',
      message: '终止成功'
    })
    getProjectList()
  } catch (error) {
    console.log(error)

    if (error === 'cancel') {
      ElMessage({
        type: 'info',
        message: '已取消终止'
      })
    } else {
      ElMessage({
        type: 'error',
        message: '终止失败'
      })
    }
  }
}
// 查看项目
const showContent = ref()
const lookContent = (row) => {
  showContent.value.open(row)
}
// 项目发布编辑成功回调函数
const onSuccess = () => {
  console.log('回调函数执行了')

  getProjectList()
}
// 院系映射
const categorizationMap = ref(['全体', '计院', '理学院', '管院'])
</script>
<template>
  <PageContainer>
    <el-header class="header">
      <el-button type="primary" @click="handleAdd">发布项目</el-button>
    </el-header>
    <el-main class="main">
      <el-table :data="tableData" max-height="80vh" flexible="true">
        <el-table-column type="index" label="序号" fixed width="60" />
        <el-table-column prop="title" label="项目名称" width="200"> </el-table-column>
        <el-table-column prop="info" label="内容" width="150">
          <template #default="{ row }">
            <el-button type="primary" plain round @click="lookContent(row)">查看内容</el-button>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            {{ row.status == 0 ? '进行中' : '结束' }}
          </template>
        </el-table-column>
        <el-table-column prop="people_num" label="报名人数" width="100"> </el-table-column>
        <el-table-column prop="categorization" label="院系分类" width="200">
          <template #default="{ row }">
            {{ categorizationMap[row.categorization] }}
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="200"> </el-table-column>
        <el-table-column prop="over_time" label="截止时间" width="200"> </el-table-column>
        <el-table-column fixed="right" label="修改信息" width="200">
          <template #default="{ row }">
            <el-button
              type="primary"
              plain
              circle
              :icon="Edit"
              @click="handleEdit(row)"
            ></el-button>
            <!-- <el-button type="danger" plain circle :icon="Delete" @click="handleDelete"></el-button> -->
            <el-button type="danger" plain circle :icon="Lock" @click="handleEnd(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <ChangeProgram ref="changeProgram" @success="onSuccess"></ChangeProgram>
    <ShowContent ref="showContent"></ShowContent>
  </PageContainer>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
}

.main {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 6px;
}

.drawer-form {
  :deep(.el-input) {
    width: 400px;
  }

  .editor {
    width: 600px;
    height: 300px;
    margin-bottom: 60px;
  }
}
</style>
